<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{margin: 0; padding: 0;}
		.nav{
			width: 200px;
			/*border: 1px solid #333;*/
			margin: 20px auto;
			display: block;
		}
		.nav #btn{
			display: block;
			width: 100px;
			height: 50px;
			border: 1px solid #eee;
			border-radius: 5px;
			background: #eee;
			text-align: center;
			line-height: 50px;
			cursor:pointer;
		}
		.nav #btn:hover{
			background: lightblue;
			cursor: pointer;
		
		}
		#list{
			display: none;
			list-style: none;
			border:1px solid #aaa;
			border-radius: 5px;
			width: 100px;
			border: 1px solid #aaa;
			border-radius: 5px;
			list-style: none;
			display: none;/*消失*/
		}
		#list li{
			text-align: center;
			line-height: 50px;
			cursor: pointer;
			list-style-type: : none;
			text-align: center;
			line-height: 50px;
			cursor: pointer;/*光标属性*/
		}
		
		#list li:hover{
			background: lightblue;
			/*cursor: pointer;*/
		}
	</style>
</head>
<body>
	<span class="nav">
		<div id="btn">DropDown</div>
		<ul id="list">
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
			<li>第四个</li>
		</ul>
	</span>
</body>
<script>
	function $(id){
		return document.getElementById(id);
	}
	$('btn').onOff=false;

	$ ('btn').onclick=function(){
      if(this.onOff==false){
      	$('list').style.display='block';
      	this.onOff=true;
      }else{
      	$('list').style.display='none';
      	this.onOff=false;
      }
	}

	var btn=$('btn');
	var li=document.getElementsByTagName('li');//获取li元素
	for(var i=0;i<li.length;i++){//遍历li标签；
		li[i].onclick=function(){
         btn.innerHTML=this.innerHTML;
         $('list').style.display='none';
		}
             
	}
   
</script>
</html>